<nav class="bg-white shadow-md fixed top-0 right-0 left-0 z-50">
    <div class="container mx-auto py-2 md:flex ">
        <div class="flex justify-between items-center">
            <div class="mx-2 text-3xl text-gray-800 font-bold hover:text-gray-800">
                <a href="/index">Gfer</a>
            </div>
            <div class="md:hidden">
                <button type="button"
                        class="block text-gray-900 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                        <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                    </svg>
                </button>
            </div>
        </div>
        <div class="w-full pb-2 md:items-center md:justify-between md:pb-0 hidden md:flex">
            <div class="flex flex-col px-2 md:flex-row">
                <a href="/index"
                   class="py-2 px-2 text-gray-800 rounded-lg hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">首页</a>
                <a href="/index"
                   class="py-2 px-2 text-gray-800 rounded-lg hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">论坛</a>
                <div class="mx-4 pt-1">
                    <input type="text"
                           class="w-full px-4 py-2 leading-tight text-sm text-gray-400 bg-gray-500 focus:bg-gray-900 rounded-full placeholder-gray-200 focus:outline-none focus:shadow-outline"
                           placeholder="search">
                </div>
            </div>
            <div class="flex flex-col md:flex-row item-center">
                <div class="dropdown">
                    <button class="flex items-center py-2 px-2 text-gray-800 md:mx-2">
                        <div>新建</div>
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                        </svg>
                    </button>
                    <ul class="dropdown-content absolute hidden border text-sm pt-1 rounded-lg bg-white shadow-lg">
                        <li>
                            <a class="hover:bg-gray-900 hover:text-white py-2 px-4 block whitespace-no-wrap" href="#">提个问题</a>
                        </li>
                    </ul>
                </div>
                <div class="dropdown">
                    <button class="flex items-center py-2 px-2 text-gray-800 md:mx-2">
                        <div class="flex items-center ">
                            <div class="h-6 w-6 mr-2">
                                <img class="rounded-full border"
                                     src="https://cdn.learnku.com/uploads/avatars/19883_1510295716.jpeg!/both/100x100"
                                     alt="">
                            </div>
                            <div>zhaopengme</div>
                        </div>
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                        </svg>
                    </button>
                    <ul class="dropdown-content absolute hidden border text-sm pt-1 rounded-lg bg-white shadow-lg">
                        <li><a class="hover:bg-gray-900 hover:text-white py-2 px-4 block whitespace-no-wrap border-b"
                               href="/user/profile">个人信息</a></li>
                        <li><a class="hover:bg-gray-900 hover:text-white py-2 px-4 block whitespace-no-wrap border-b"
                               href="/user/question">我的提问</a></li>
                        <li><a class="hover:bg-gray-900 hover:text-white py-2 px-4 block whitespace-no-wrap border-b"
                               href="/user/answer">我的回答</a></li>
                        <li><a class="hover:bg-gray-900 hover:text-white py-2 px-4 block whitespace-no-wrap"
                               href="#">退出</a></li>
                    </ul>
                </div>
                <a href="#"
                   class="py-2 px-2 text-gray-800 rounded-lg hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">微信登录</a>
            </div>
        </div>
    </div>
</nav>
